<template>
  <div class="w-full mx-auto p-4">
    <h2 class="text-2xl font-bold mb-6">评论</h2>

    <CommentEditor1 v-if="showEditor" @submit="handleAddComment" @cancel="showEditor = false" />
    <button v-else @click="showEditor = true"
      class="w-full p-3 mb-6 text-left border border-gray-300 rounded-lg hover:bg-gray-50">
      写下你的评论...
    </button>

    <div v-if="comments.length">
      <CommentItem1 v-for="comment in comments" :key="comment.id" :comment="comment" :depth="0" :max-depth="maxDepth"
        @reply="handleReply" @delete="handleDelete" />
    </div>
    <div v-else class="text-center py-8 text-gray-500">
      暂无评论，快来发表第一条评论吧！
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Comment } from '~/types/comment'

const props = defineProps({
  maxDepth: {
    type: Number,
    default: 5
  }
})

const showEditor = ref(false)
const comments = ref<Comment[]>([])

// 模拟初始数据
onMounted(() => {
  comments.value = [
    {
      id: 1,
      content: '这是一条顶级评论',
      author: {
        name: '用户A',
        avatar: 'https://i.pravatar.cc/150?img=1'
      },
      createdAt: new Date(),
      replies: [
        {
          id: 3,
          content: '这是一条回复',
          author: {
            name: '用户B',
            avatar: 'https://i.pravatar.cc/150?img=2'
          },
          createdAt: new Date(),
          replies: [
            {
              id: 4,
              content: '这是嵌套回复',
              author: {
                name: '用户C',
                avatar: 'https://i.pravatar.cc/150?img=3'
              },
              createdAt: new Date(),
              replies: [
                {
                  id: 5,
                  content: '这是嵌套回复',
                  author: {
                    name: '用户C',
                    avatar: 'https://i.pravatar.cc/150?img=3'
                  },
                  createdAt: new Date(),
                  replies: [
                    {
                      id: 6,
                      content: '这是嵌套回复',
                      author: {
                        name: '用户C',
                        avatar: 'https://i.pravatar.cc/150?img=3'
                      },
                      createdAt: new Date(),
                      replies: [
                        {
                          id: 7,
                          content: '这是嵌套回复',
                          author: {
                            name: '用户C',
                            avatar: 'https://i.pravatar.cc/150?img=3'
                          },
                          createdAt: new Date(),
                          replies: [
                            {
                              id: 8,
                              content: '这是嵌套回复',
                              author: {
                                name: '用户C',
                                avatar: 'https://i.pravatar.cc/150?img=3'
                              },
                              createdAt: new Date()
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      id: 2,
      content: '这是另一条顶级评论',
      author: {
        name: '用户D',
        avatar: 'https://i.pravatar.cc/150?img=4'
      },
      createdAt: new Date()
    }
  ]
})

const handleAddComment = (content: string) => {
  const newComment: Comment = {
    id: Date.now(),
    content,
    author: {
      name: '当前用户',
      avatar: 'https://i.pravatar.cc/150?img=5'
    },
    createdAt: new Date()
  }
  comments.value.unshift(newComment)
  showEditor.value = false
}

const handleReply = ({ parentId, content }: { parentId: string | number, content: string }) => {
  const newReply: Comment = {
    id: Date.now(),
    content,
    author: {
      name: '当前用户',
      avatar: 'https://i.pravatar.cc/150?img=5'
    },
    createdAt: new Date()
  }

  const addReplyToComment = (comments: Comment[]): boolean => {
    for (const comment of comments) {
      if (comment.id === parentId) {
        if (!comment.replies) {
          comment.replies = []
        }
        comment.replies.unshift(newReply)
        return true
      }
      if (comment.replies && addReplyToComment(comment.replies)) {
        return true
      }
    }
    return false
  }

  addReplyToComment(comments.value)
}

const handleDelete = (id: string | number) => {
  const deleteComment = (comments: Comment[]): Comment[] => {
    return comments.filter(comment => {
      if (comment.id === id) return false
      if (comment.replies) {
        comment.replies = deleteComment(comment.replies)
      }
      return true
    })
  }

  comments.value = deleteComment(comments.value)
}
</script>